<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>年终学习计划列表</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="app">
        <div class="top">
            <div class="page-content">
              <h3>任务计划列表</h3>
            </div>
        </div>
          <div class="main">
            <h4 class="big-title">添加任务:</h4>
            <input v-model="todo" 
            type="text" 
            placeholder="例如：吃饭睡觉打豆豆：提示：+回车即可添加任务" 
            class="task-input"
             v-on:keyup.enter="addtodo(123,$event)">
            <ul class="task-count" v-show="list.length>0">
              <li>{{noCheckedLength}}个任务未完成</li>
              <li class="action">
                <a href="#all" :class="{selected:selectPlan==='all'}">所有任务</a>
                <a href="#unfinished" :class="{selected:selectPlan==='unfinished'}">未完成任务</a>
                <a href="#finished" :class="{selected:selectPlan==='finished'}">完成的任务</a>
              </li>
            </ul>
            <h4 class="big-title">任务列表:</h4>
            <div class="tasks">
              <span class="no-task-tip" v-show="list.length==0">还没有添加任何任务</span>
              <ul class="todo-list">
                <li class="todo" 
                :class="{completed:value.ischecked,editing:value===editorTodos}"
                 v-for="(value,key) in filteredList"
                  v-bind:key="key">
                  <div class="view">
                    <input type="checkbox" class="toggle"  v-model="value.ischecked">
                    <label for="" @dblclick="editorTodo(value)">{{value.title}}</label>
                    <button class="destroy" @click="deleteToDo(value)">X</button>
                  </div>
                  <input 
                   v-focus="editorTodos===value"
                   type="text" 
                   class="edit" 
                   v-model="value.title"
                   @blur="editorTodoed(value)"
                   @keyup.13="editorTodoed(value)"
                   @keyup.esc="cacelTodo(value)"
                   >
                </li>
              </ul>
            </div>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./js/app.js"></script>
</body>
</html>